<template>
  <drawer-panel v-model="dialogVisible" title="设备信息" size="870px">
    <form-panel :ok-click="submitForm">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="queryObj" :rules="rules" label-width="165px" label-suffix="：" size="medium">
          <el-col :span="24">
            <el-form-item label="设备名称" prop="eqName">
              <el-input v-model="queryObj.eqName" placeholder="请输入设备名称" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="设备编码" prop="eqCode">
              <el-input v-model="queryObj.eqCode" placeholder="请输入设备编码" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="设备型号" prop="eqType">
              <el-input v-model="queryObj.eqType" placeholder="请输入设备型号" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="mn" prop="mn">
              <el-input v-model="queryObj.mn" placeholder="请输入mn" clearable :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="SIM卡号" prop="simNo">
              <el-input v-model="queryObj.simNo" placeholder="请输入SIM卡号" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运维单位" prop="operator">
              <el-input v-model="queryObj.operator" placeholder="请输入运维单位" clearable :style="{ width: '100%' }">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产厂家" prop="manufacturer">
              <el-input
                v-model="queryObj.manufacturer"
                placeholder="请输入生产厂家"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运维单位联系人" prop="operatorLinkMan">
              <el-input
                v-model="queryObj.operatorLinkMan"
                placeholder="请输入运维单位联系人"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产厂家联系人" prop="contacts">
              <el-input
                v-model="queryObj.contacts"
                placeholder="请输入生产厂家联系人"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运维单位电话" prop="operatorPhone">
              <el-input
                v-model="queryObj.operatorPhone"
                placeholder="请输入运维单位电话"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产厂家联系电话" prop="telPhone">
              <el-input
                v-model="queryObj.telPhone"
                placeholder="请输入生产厂家联系电话"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否停运" prop="isStop">
              <el-radio-group v-model="queryObj.isStop" size="medium">
                <el-radio
                  v-for="(item, index) in isStopOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </form-panel>
  </drawer-panel>
</template>

<script>
import { equipmentSaveOrUpdate } from '@/api/commonApi'

export default {
  name: 'EquipInput',
  props: {
    success: {
      type: Function,
      default: () => {}
    },
    // 站点编码
    pointCode: {
      type: String,
      default: ''
    },
    // 站点编码
    monitorType: {
      type: String,
      default: 'airtype'
    }
  },
  data() {
    return {
      dialogVisible: false,
      queryObj: {
        id: undefined,
        eqName: undefined,
        eqCode: undefined,
        eqType: undefined,
        mn: undefined,
        simNo: undefined,
        operator: undefined,
        manufacturer: undefined,
        operatorLinkMan: undefined,
        contacts: undefined,
        operatorPhone: undefined,
        telPhone: undefined,
        isStop: undefined
      },
      rules: {
        eqName: [
          {
            required: true,
            message: '请输入设备名称',
            trigger: 'blur'
          }
        ],
        /*        eqCode: [
          {
            required: true,
            message: '请输入设备编码',
            trigger: 'blur'
          }
        ],*/
        eqType: [
          {
            required: true,
            message: '请输入设备型号',
            trigger: 'blur'
          }
        ],
        mn: [
          {
            required: true,
            message: '请输入mn',
            trigger: 'blur'
          }
        ]
        /*        simNo: [
          {
            required: true,
            message: '请输入SIM卡号',
            trigger: 'blur'
          }
        ],
        operator: [
          {
            required: true,
            message: '请输入运维单位',
            trigger: 'blur'
          }
        ],
        manufacturer: [
          {
            required: true,
            message: '请输入生产厂家',
            trigger: 'blur'
          }
        ],
        operatorLinkMan: [
          {
            required: true,
            message: '请输入运维单位联系人',
            trigger: 'blur'
          }
        ],
        contacts: [
          {
            required: true,
            message: '请输入生产厂家联系人',
            trigger: 'blur'
          }
        ],
        operatorPhone: [
          {
            required: true,
            message: '请输入运维单位电话',
            trigger: 'blur'
          }
        ],
        telPhone: [
          {
            required: true,
            message: '请输入生产厂家联系电话',
            trigger: 'blur'
          }
        ],
        isStop: [
          {
            required: true,
            message: '是否停运不能为空',
            trigger: 'change'
          }
        ]*/
      },
      isStopOptions: [
        {
          label: '启用',
          value: 1
        },
        {
          label: '停用',
          value: -1
        }
      ]
    }
  },
  methods: {
    open(record) {
      this.dialogVisible = true
      if (record) {
        Object.assign(this.queryObj, record)
      } else {
        Object.assign(this.queryObj, {
          id: undefined,
          eqName: undefined,
          eqCode: undefined,
          eqType: undefined,
          mn: undefined,
          simNo: undefined,
          operator: undefined,
          manufacturer: undefined,
          operatorLinkMan: undefined,
          contacts: undefined,
          operatorPhone: undefined,
          telPhone: undefined,
          isStop: undefined
        })
      }
    },
    close() {
      this.dialogVisible = false
    },
    submitForm() {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        // TODO 提交表单
        const monitorEquipment = Object.assign({}, this.queryObj, {
          monitorType: this.monitorType,
          pointCode: this.pointCode
        })
        equipmentSaveOrUpdate(monitorEquipment).then(res => {
          this.$message({
            message: `操作成功`,
            type: 'success'
          })
          this.success()
          this.close()
        })
      })
    },
    resetForm() {
      this.$refs.elForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/pages/index.scss';
</style>
